<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-08 09:25:58
-->
<template>
  <div class="video_page">
    <div id="palyer"></div>
  </div>
</template>


<script>
import { defineComponent, onMounted, onBeforeUnmount, ref } from "vue";
import Player from "xgplayer/dist/simple_player";
import volume from "xgplayer/dist/controls/volume";
import playbackRate from "xgplayer/dist/controls/playbackRate";

export default defineComponent({
  props: {
    url: {
      type: String,
      default: () => "",
    },
    coverUrl: {
      type: String,
      default: () => "",
    },
  },
  setup(props) {
    onBeforeUnmount(() => {
      if (Myplayer.value) {
        Myplayer.value.destroy();
      }
    });

    const Myplayer = ref();
    const init = () => {
      Myplayer.value = new Player({
        id: "palyer",
        url: props.url,
        controlPlugins: [volume, playbackRate],
        playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
        fluid: true,
        autoplay: !false,
        // videoInit: true, //显示首帧
        poster: props.coverUrl,
        "x5-video-player-type": "h5",
        "x5-video-player-fullscreen": true,
        playsinline: true, //禁止网页自动全屏
      });
    };
    return {
      init,
      Myplayer,
    };
  },
});
</script>


<style lang="scss" scoped>
.video_page {
  height: 210px;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #0099ff;
  #palyer {
  }
}
</style>